<template>
  <el-dialog
    :visible="isShowDialog"
    @close="btnCancel"
  >
    <el-form ref="addForm" :model="formData" :rules="rules">
      <el-form-item label="经纪" prop="agent">
        <el-select v-model="formData.agent" placeholder="请选择">
          <el-option
            v-for="item in agentsList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分类" prop="category">
        <el-select v-model="formData.category" placeholder="请选择">
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" style="width:90%" />
      </el-form-item>
      <el-form-item label="标签" prop="tags">
        <el-tag
          v-for="item in formData.tags"
          :key="item"
          closable
          :disable-transitions="false"
          @close="handleClose(item)"
        >
          {{ item }}
        </el-tag>
        <el-input
          v-if="inputVisible"
          ref="saveTagInput"
          v-model="inputValue"
          class="input-new-tag"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        />
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <!-- <el-select v-model="formData.address" placeholder="选择区域" style="width:129px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <el-input v-model="formData.address" style="width:73%" />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="formData.price" style="width:90%" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="formData.desc" type="textarea" style="width:90%" resize="none" />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input v-if="!formData.id" v-model="formData.content" style="width:90%" />
        <div v-if="formData.id" v-html="formData.content" />
        <!-- <el-input style="width:90%" v-html="formData.content" /> -->
      </el-form-item>
      <el-form-item label="介绍图片">
        <introUploadImage ref="introImg" @imgUrl="introUrlFn" />
      </el-form-item>
      <el-form-item label="封面">
        <UploadImage ref="coverImg" @imgUrl="coverUrlFn" />
      </el-form-item>
      <el-row type="flex" justify="center" style="margin-top:20px">
        <el-button type="primary" @click="btmOK">确认</el-button>
        <el-button @click="btnCancel">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
// 引入获取经纪列表
import { getAgentsList } from '@/api/agents.js'
import { getCategoryList } from '@/api/modules/category'
import { addProp, editProp } from '@/api/property'
import UploadImage from './UploadImage.vue'
import introUploadImage from './introUploadImage.vue'

export default {
  components: {
    UploadImage, introUploadImage
  },
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 选择器数据
      agentsList: [],
      categoryList: [],
      // brokerVal: '',
      // value: '',
      // // 标签数据
      // dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      inputValue: '',
      // 定义表单数据
      formData: {
        title: '',
        desc: '',
        image: '',
        agent: {},
        content: '',
        address: '',
        price: '',
        photos: '',
        tags: [],
        category: {}
      },
      // 校验规则
      rules: {
        title: [{
          required: true, message: '不能为空', trigger: 'blur'
        }],
        price: [{
          required: true, message: '不能为空', trigger: 'blur'
        }],
        address: [{
          required: true, message: '不能为空', trigger: 'blur'
        }],
        desc: [{
          required: true, message: '不能为空', trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    // 返回封面的在线图片地址
    coverUrlFn(url) {
      if (url.length === 0) {
        url = ''
      }
      this.formData.image = url
    },
    // 返回介绍图片的在线图片地址
    introUrlFn(url) {
      const res = url.map(item => {
        return item.url
      })
      this.formData.photos = res
    },
    // 回显介绍图片
    changerImg() {
      const res = this.formData.photos.map(item => {
        return { url: item }
      })
      this.$refs.introImg.fileList = res || ''
    },
    // 回显封面图片
    changerCoverImg() {
      this.$refs.coverImg.fileList = [
        { url: this.formData.image }
      ]
    },
    // 点击取消
    btnCancel() {
      // 清除数据
      // this.$parent.isShowDialog = false
      this.formData = {
        title: '',
        desc: '',
        image: '',
        agent: {},
        content: '',
        address: '',
        price: '',
        photos: '',
        tags: [],
        category: {}
      }
      this.$refs.introImg.fileList = []
      this.$refs.coverImg.fileList = []
      this.$refs.addForm.resetFields()
      // 关闭弹窗
      this.$emit('update:isShowDialog', false)
    },
    async btmOK() {
      await this.$refs.addForm.validate()
      if (this.formData.id) {
        await editProp(this.formData)
      } else {
        await addProp(this.formData)
      }
      // 提示用户
      this.$message.success('操作成功')
      // 刷新数据
      this.$emit('upData')
      // 关闭弹窗
      this.$emit('update:isShowDialog', false)
    },
    // 获取经纪列表方法
    async getAgentsList() {
      // 发送请求,结构出data
      const { data } = await getAgentsList()
      // 给选择器数据重新赋值
      this.agentsList = data
      this.formData.agent = this.formData.agent ? this.formData.agent.id : ''
    },
    // 获取分类列表方法
    async categoryListFn() {
      // 发送请求,结构出data
      const { data } = await getCategoryList()
      // 给选择器数据重新赋值
      this.categoryList = data
      console.log('data: ', data)
      this.formData.category = this.formData.category ? this.formData.category.id : ''
    },
    // 以下是标签tag方法
    handleClose(tag) {
      this.formData.tags.splice(this.formData.tags.indexOf(tag), 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.formData.tags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }

}
</script>

<style lang="scss" scoped>
// 标签tag样式
 .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
   margin-left: 10px;
  }
</style>
